<template>
	<div class="container" style="">
		<van-nav-bar title="客服组" left-arrow @click-left="$router.back()" fixed>
			<template #right>
				<icon-svg name="select" class="icon" :size="20" @click="openSearch" />
			</template>
		</van-nav-bar>
		<div class="flex-scroll">
			<van-list
				v-model:loading="loading"
				loading-text="加载中..."
				@load="onLoad"
				:finished="finished"
				:offset="46"
			>
				<template #default>
					<van-swipe-cell v-for="(item, index) in list" :key="index">
						<div class="item">
							<!-- <van-image round width="80" height="80" :src="item.cus_img" /> -->
							<div class="right" @click="toDetail(item)">
								<div class="left_text">
									<div class="left_text_top">
										<span style="width: 100%;"
											><i class="gray">事业部：</i>{{ item.biz_name }}</span
										>
										<span><i class="gray">品牌：</i>{{ item.bra_name }}</span>
										<span>
											<i class="gray">名称：</i>
											{{ item.name }}
										</span>
										<span>
											<i class="gray">类型：</i>
											<i>{{
												item.multiple_customer_link == 1 ? "非去重" : "去重"
											}}</i>
										</span>
										<span>
											<i class="gray">客服码类型：</i>
											{{ item.contact_type_name }}
										</span>
									</div>
								</div>
							</div>
						</div>
					</van-swipe-cell>
					<cl-empty v-if="!loading && !list.length" tips="暂无数据"></cl-empty>
				</template>
			</van-list>
		</div>
		<PopSelect ref="popSelectRef" @resetSearch="resetSearch" :bizRefData="bizRefData" />
	</div>
</template>

<script>
import dayjs from "dayjs";
import PopSelect from "./popSelect.vue";
export default {
	components: {
		PopSelect
	},
	data() {
		return {
			list: [],
			loading: false,
			finished: false,
			error: false,

			search: {
				name: "",
				biz_id: "" //必填
			},
			pages: {
				size: 10,
				page: 0
			}
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
	},
	methods: {
		onLoad() {
			// 异步更新数据
			this.pages.page++;
			this.getList();
		},
		async getList() {
			this.loading = true;
			await this.$service.wx
				.page({
					...this.pages,
					...this.search
				})
				.then(res => {
					console.log(res.list, "res.list");

					this.list.push(...res.list);
					if (!res.list.length) {
						this.finished = true;
					} else {
						this.finished = false;
					}
				})
				.catch(err => {
					console.error("请求失败:", err);
					this.loading = false;
					this.finished = true;
				});
			this.loading = false;
		},
		openSearch() {
			this.$refs.popSelectRef.open();
			this.$nextTick(() => {
				this.$refs.popSelectRef.setData(this.search);
			});
		},
		resetSearch(data) {
			this.search = { ...this.search, ...data };
			this.pages.page = 1;
			this.list = [];
			this.loading = true;
			this.getList();
		},
		async toDetail(data) {
			let query = {
				id: data.id,
				corpid: data.corpid
			};
			this.$router.push({ path: "/mobilehome/customerServiceTeamDetail", query });
		}
	}
};
</script>
<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-top: 46px;
	font-size: 14px;
}

.ellipsis {
	white-space: nowrap;
	/* 不换行 */
	overflow: hidden;
	/* 超出隐藏 */
	text-overflow: ellipsis;
	/* 添加省略号 */
}

.flex-scroll {
	height: calc(100% - 46px);
	overflow-y: auto;
}
.blue {
	color: #156dff;
}
.red {
	color: red;
}
.van-swipe-cell {
	border-radius: 10px;
	margin: 10px;

	box-shadow: 0 2px 8px rgba(128, 128, 128, 0.3);

	.item {
		display: flex;
		align-items: center;
		padding: 10px;

		.right {
			flex: 1;
			display: flex;
			align-items: center;
			margin-left: 20px;
			line-height: 26px;

			.left_text {
				display: flex;
				flex-direction: column;

				.left_text_top {
					display: flex;
					flex-wrap: wrap;

					span {
						width: 50%;
					}
				}
			}
		}
	}
}

::v-deep .van-tag {
	width: auto !important;
}

i {
	font-style: normal;
}

.gray {
	color: #c1c1c1;
	display: inline-block;
	// width: 7;
}
</style>
